<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>url hash</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<div id="app">
    <a href="#zhuye">主页</a>
    <a href="#keji">科技</a>
    <a href="#caijing">财经</a>

    <component :is="comName"></component>

</div>
<script type="text/javascript">
    const zhuye = {
        template: '<h1>主页信息</h1>'
    }

    // 科技组件
    const keji = {
        template: '<h1>科技信息</h1>'
    }

    // 财经组件
    const caijing = {
        template: '<h1>财经信息</h1>'
    }
    var vm=new Vue({
        el:'#app',
        data:{
            comName:'zhuye'
        },
        components:{
            zhuye,
            keji,
            caijing
        }
    })


    window.onhashchange=function(){
        let component=location.hash.slice(1);
        vm.comName=component;
    }
</script>

</body>
</html>